<template>
	<div class="user-center">
		<div style="padding: 0">
			<!-- 顶部用户信息区域 -->
			<div class="user-info-section">
				<div class="user-avatar">
					<up-image :src="userData.avatar" mode="widthFix" :lazy-load="true" width="120px" height="120px" />
				</div>
				<div class="user-details">
					<div class="user-nickname">
						<text class="user-nickname-title">{{ userData.nickname }}</text>
						<up-button :plain="true" shape="circle">{{ isConcern ? '已关注' : '关注' }}</up-button>
					</div>
					<text class="user-id">编号: {{ userData.serialNumber }}</text>
					<text class="user-type">{{ userData.college }} · {{ userData.major }}</text>
				</div>
			</div>

			<!-- 用户标签 -->
			<div class="user-tags">
				<up-tag mark>{{userData.role}}</up-tag>
			</div>

			<up-divider text="详情"></up-divider>

			<div class="user-form-item">
				<up-form labelWidth="100">
					<up-form-item label="性别：">{{userData.gender}} </up-form-item>
					<up-form-item label="联系方式："> {{userData.phoneNumber}}</up-form-item>
					<up-form-item label="当前状态：">{{userData.status}} </up-form-item>
					<up-form-item label="更新时间：">{{standardDateTime(userData.updateTime)}}</up-form-item>
					<up-form-item label="简介：">{{userData.introduction}} </up-form-item>
				</up-form>
			</div>

			<up-divider text="Ta的帖子"></up-divider>

			<!-- 帖子列表 -->
			<view class="post-content">
				<!-- 加载状态应该在请求过程中显示，而不是依赖posts数据 -->
				<up-loading-icon v-if="loading" />

				<!-- 帖子容器 -->
				<view class="posts-container" v-else>
					<!-- 有帖子数据时显示 -->
					<post-item v-for="post in posts" :key="post.postId" :post="post" @click="handlePostClick"
						v-if="posts.length > 0" />

					<!-- 没有帖子数据时显示空状态 -->
					<view class="empty-posts" v-if="posts.length === 0">
						<up-icon name="file-empty" size="40" color="#ccc" />
						<text class="empty-text">该用户暂无发布帖子</text>
					</view>
				</view>
			</view>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		standardDateTime
	} from '../../utils/date';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getUserInfoService
	} from '../../server/api/user';
	import postItem from '../post/components/postItem.vue';
	import {
		getPostsService
	} from '../../server/api/post';
	import {
		adaptUserInfo,
		adaptPostList
	} from '../../utils/dataAdapter';

	// 是否关注
	const isConcern = ref(false);
	const rateValue = ref(5.5);
	// 用户数据
	const userData = ref({});
	// 帖子数据
	const posts = ref([])
	const loading = ref(false)

	/**
	 * 功能描述：处理帖子点击
	 * 类型：function
	 * 开发者：梦成空
	 * 时间：2025/10/15 19:20
	 */
	const handlePostClick = (postId) => {
		// 修复：添加帖子点击处理逻辑
		uni.navigateTo({
			url: `/pages/post/postInfo?postId=${postId}`
		});
	}

	/**
	 * 功能描述：获取用户信息
	 * 类型：function
	 * 开发者：梦成空
	 * 时间：2025/10/15 19:20
	 */
	const getUserInfo = async (userId) => {
		const res = await getUserInfoService({
			userId: userId
		})
		// console.log(res.data);
		// 使用数据适配器处理后端字段
		userData.value = adaptUserInfo(res.data)
	}

	/**
	 * 功能描述：获取帖子数据
	 * 类型：function
	 * 开发者：梦成空
	 * 时间：2025/10/15 19:20
	 */
	const getPosts = async (userId) => {
		// 修复：开始请求时设置loading为true
		loading.value = true;
		try {
			const res = await getPostsService({
				userId: userId,
				pageNum: 1,
				pageSize: 3,
				// 修复：添加排序参数，确保按最新发布时间排序
				sort: 'create_time',
				orderBy: 'DESC'
			})
			// 使用数据适配器处理帖子列表数据
			posts.value = adaptPostList(res.data || []); // 确保是数组
		} catch (error) {
			console.error('获取帖子失败:', error);
			posts.value = [];
		} finally {
			// 修复：请求完成（无论成功失败）设置loading为false
			loading.value = false;
		}
	}

	/**
	 * 功能描述：页面加载时
	 * 类型：生命周期
	 * 开发者：梦成空
	 * 时间：2025/10/15 19:25
	 */
	onLoad((option) => {
		const userId = option.userId;
		if (userId) {
			getUserInfo(userId);
			getPosts(userId)
		} else {
			handleBack();
		}
	});
</script>

<style lang="scss" scoped>
	@import './style/userInfo.scss';
</style>